[EuiSelectable] Fix unvirtualized variant crashing on selecting option by weronikaolejniczak · Pull Request #9326 · elastic/eui

weronikaolejniczak · 2026-01-19T11:01:54Z

Summary

Updated EuiSelectable querying from #${selector} (id selector) to [id="${selector}"] (attribute selector) to allow for unescaping special characters like a colon :.

Tests

With the test added and without the fix, the whole test suite is failing due to an uncaught Syntax Error:

as expected. That is enough to cover this bug but I added additional assertion for the scroll behavior itself.

Why are we making this change?

It has been reported on Slack and on #8740 that unvirtualized EuiSelectable is causing issues when selecting an option. The before-mentioned task is unrelated.

The issue is recent, likely appeared after Kibana's transition to React 18.

The reason is when the list is not virtualized, the component attemps to scroll the active option into view and it queries the element with an id selector (#id). Well, in React 18 the generated IDs (via useId) can contain colons (:r1o: like in your stack trace).: denotes a pseudo-class in CSS selector and so it causes a syntax error when used without escaping. The fix is to update id selector to attribute selector ([id="id"]).

Here's a quick reproduction Codesandbox.

Screenshots #

Before

536328318-e1c5feed-8650-4859-acee-c9293634d9fc.mov

Impact to users

🟢 This is a bug fix. Not a breaking change. No changes needed on consumer side.

QA

Specific checklist

Verify scrolling to an active option works as expected (staging docs)

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately
- If applicable, added the breaking change issue label (and filled out the breaking change checklist)
- If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

acstll

The fix is working as expected and the code looks correct. I shared one suggestion and a doubt regarding the tests.

Thanks for tackling this one 🙌

packages/eui/src/components/selectable/selectable_list/selectable_list.test.tsx

elasticmachine · 2026-01-21T09:07:58Z

💚 Build Succeeded

History

💚 Build #2468 succeeded 837278c
💚 Build #2464 succeeded dc4bd28

cc @weronikaolejniczak

elasticmachine · 2026-01-21T09:24:39Z

💚 Build Succeeded

Buildkite Build
Commit: 6da89a0

History

💚 Build #5629 succeeded 837278c
💔 Build #5625 failed dc4bd28

cc @weronikaolejniczak

acstll

🟢 Again thanks for the fix and for addressing my comments 🙌

elastic#9326)

`112.0.0` ⏩ `112.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes - Update `span_links_badge.tsx` conditional `onClick` props on `EuiBadge` to satisfy TypeScript 93d7fae - Update snapshots 24c2f9a ## Package updates ### `@elastic/eui` [`v112.1.0`](https://github.com/elastic/eui/releases/tag/v112.1.0) - Updated `timeline` icon glyph ([#9331](elastic/eui#9331)) - Updated `EuiContextMenu` panels to allow passing `data-test-subj`, `aria-label`, `className` and `css` props ([#9323](elastic/eui#9323)) - Added "zoom in" functionality to time window buttons in `EuiSuperDatePicker` ([#9325](elastic/eui#9325)) - Added `displayName` to `EuiButton`, `EuiButtonEmpty`, `EuiDescriptionList` and its sub-components, `EuiEmptyPrompt`, `EuiFlexGrid`, `EuiFlexItem`, `EuiIcon`, `EuiImage`, `EuiLoadingLogo`, `EuiPageSection`, `EuiPageSidebar`, `EuiPageTemplate` and its sub-components and `EuiPanel` ([#9324](elastic/eui#9324)) - Added `fill` prop (defaults to `false`) to `EuiBadge` component that controls whether the badge should use filled or non-filled (less intense) colors. By default, badges will now render as the non-filled variant. ([#9306](elastic/eui#9306)) - Updated EuiBadge design to have rounded corners and improved paddings ([#9302](elastic/eui#9302)) **Bug fixes** - Fixed non-virtualized `EuiSelectable` throwing SyntaxError when selecting an option ([#9326](elastic/eui#9326)) - Fixed an issue where `push` flyouts in a stacked layout calculated the content offset based on the hidden main flyout's width instead of the visible child flyout's width ([#9322](elastic/eui#9322)) ### @elastic/eui-theme-borealis [`v5.4.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/eui-theme-borealis/changelogs/CHANGELOG_2026.md#v540) - Updated `badgeBackground` color token value to equal `backgroundFilledText` ([#9306](elastic/eui#9306)) ### @elastic/eui-docusaurus-theme [`v2.2.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/docusaurus-theme/changelogs/CHANGELOG_2026.md#v220) - Added `extraFiles` prop to the `Demo` component. It allows to pass extra files that will be added to the Codesandbox instance. ([#9317](elastic/eui#9317)) - Updated the `IMPORT_REGEX` to include relative imports so that all imports are removed from the snippet. All imported references have to be passed to `Demo` in the `scope` prop. ([#9317](elastic/eui#9317)) --------- Co-authored-by: Tomasz Kajtoch <[email protected]>

`112.0.0` ⏩ `112.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes - Update `span_links_badge.tsx` conditional `onClick` props on `EuiBadge` to satisfy TypeScript 93d7fae - Update snapshots 24c2f9a ## Package updates ### `@elastic/eui` [`v112.1.0`](https://github.com/elastic/eui/releases/tag/v112.1.0) - Updated `timeline` icon glyph ([elastic#9331](elastic/eui#9331)) - Updated `EuiContextMenu` panels to allow passing `data-test-subj`, `aria-label`, `className` and `css` props ([elastic#9323](elastic/eui#9323)) - Added "zoom in" functionality to time window buttons in `EuiSuperDatePicker` ([elastic#9325](elastic/eui#9325)) - Added `displayName` to `EuiButton`, `EuiButtonEmpty`, `EuiDescriptionList` and its sub-components, `EuiEmptyPrompt`, `EuiFlexGrid`, `EuiFlexItem`, `EuiIcon`, `EuiImage`, `EuiLoadingLogo`, `EuiPageSection`, `EuiPageSidebar`, `EuiPageTemplate` and its sub-components and `EuiPanel` ([elastic#9324](elastic/eui#9324)) - Added `fill` prop (defaults to `false`) to `EuiBadge` component that controls whether the badge should use filled or non-filled (less intense) colors. By default, badges will now render as the non-filled variant. ([elastic#9306](elastic/eui#9306)) - Updated EuiBadge design to have rounded corners and improved paddings ([elastic#9302](elastic/eui#9302)) **Bug fixes** - Fixed non-virtualized `EuiSelectable` throwing SyntaxError when selecting an option ([elastic#9326](elastic/eui#9326)) - Fixed an issue where `push` flyouts in a stacked layout calculated the content offset based on the hidden main flyout's width instead of the visible child flyout's width ([elastic#9322](elastic/eui#9322)) ### @elastic/eui-theme-borealis [`v5.4.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/eui-theme-borealis/changelogs/CHANGELOG_2026.md#v540) - Updated `badgeBackground` color token value to equal `backgroundFilledText` ([elastic#9306](elastic/eui#9306)) ### @elastic/eui-docusaurus-theme [`v2.2.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/docusaurus-theme/changelogs/CHANGELOG_2026.md#v220) - Added `extraFiles` prop to the `Demo` component. It allows to pass extra files that will be added to the Codesandbox instance. ([elastic#9317](elastic/eui#9317)) - Updated the `IMPORT_REGEX` to include relative imports so that all imports are removed from the snippet. All imported references have to be passed to `Demo` in the `scope` prop. ([elastic#9317](elastic/eui#9317)) --------- Co-authored-by: Tomasz Kajtoch <[email protected]>

weronikaolejniczak self-assigned this Jan 19, 2026

weronikaolejniczak force-pushed the fix/selectable-unvirtualized branch from dc4bd28 to b9d0899 Compare January 19, 2026 11:50

weronikaolejniczak marked this pull request as ready for review January 19, 2026 11:50

weronikaolejniczak requested a review from a team as a code owner January 19, 2026 11:50

weronikaolejniczak added 3 commits January 19, 2026 12:50

fix(eui): update EuiSelectable to query by attribute selector

cfb5224

chore(eui): add EuiSelectable scroll to active option test

c6a3659

chore(eui): add changelog

837278c

weronikaolejniczak force-pushed the fix/selectable-unvirtualized branch from b9d0899 to 837278c Compare January 19, 2026 11:50

weronikaolejniczak mentioned this pull request Jan 19, 2026

[EuiSelectable] Doesn't render correctly in jsdom env #8740

Closed

acstll self-requested a review January 20, 2026 14:55

acstll requested changes Jan 20, 2026

View reviewed changes

packages/eui/src/components/selectable/selectable_list/selectable_list.test.tsx Outdated Show resolved Hide resolved

packages/eui/src/components/selectable/selectable_list/selectable_list.test.tsx Show resolved Hide resolved

chore(eui): fix assertions and add a comment

6da89a0

weronikaolejniczak requested a review from acstll January 21, 2026 08:51

acstll approved these changes Jan 21, 2026

View reviewed changes

weronikaolejniczak merged commit a838d02 into elastic:main Jan 21, 2026
5 checks passed

weronikaolejniczak added a commit to weronikaolejniczak/eui that referenced this pull request Jan 23, 2026

[EuiSelectable] Fix unvirtualized variant crashing on selecting option (

226e960

elastic#9326)

acstll mentioned this pull request Jan 26, 2026

Upgrade EUI to v112.1.0 elastic/kibana#250407

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiSelectable] Fix unvirtualized variant crashing on selecting option#9326

[EuiSelectable] Fix unvirtualized variant crashing on selecting option#9326
weronikaolejniczak merged 4 commits intoelastic:mainfrom
weronikaolejniczak:fix/selectable-unvirtualized

weronikaolejniczak commented Jan 19, 2026 •

edited

Loading

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Jan 21, 2026

Uh oh!

elasticmachine commented Jan 21, 2026

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

weronikaolejniczak commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Tests

Why are we making this change?

Screenshots #

Before

Impact to users

QA

Specific checklist

General checklist

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Jan 21, 2026

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Jan 21, 2026

💚 Build Succeeded

History

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

weronikaolejniczak commented Jan 19, 2026 •

edited

Loading